/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
import { Button } from "antd";
import icon from "../../image/cat1.png";
import icon3g from "../../image/cat1.png";
import icon4g from "../../image/cat1.png";
import icon5g from "../../image/cat1.png";
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapMassMarker: React.FC = () => {
    function componentDid() {
        var map: any;
        esriLoader.loadModules([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/InfoTemplate",
            "esri/renderers/DotDensityRenderer",
            "esri/symbols/SimpleLineSymbol",
            "esri/dijit/Legend",
            "esri/Color",
            "dojo/domReady!"
        ]).then(([Map, ArcGISTiledMapServiceLayer, FeatureLayer, InfoTemplate, DotDensityRenderer, SimpleLineSymbol, Legend, Color]) => {
            // const map = new Map('mapCon', {
            //     basemap: 'topo-vector',
            //     center: [-122.12, 37.60],
            //     zoom: 7,
            // });
            map = new Map("map");

            var baseMapUrl = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
            var baseMap = new ArcGISTiledMapServiceLayer(baseMapUrl);
            map.addLayer(baseMap);

            var layerUrl = "http://services.arcgis.com/BG6nSlhZSAWtExvp/ArcGIS/rest/services/Demographics_World_Simp/FeatureServer/0";
            var layer = new FeatureLayer(layerUrl, {
                infoTemplate: new InfoTemplate("${CNTRY_NAME}", "${*}"),
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });

            var renderer = new DotDensityRenderer({
                backgroundColor: new Color("#FFFFFF"),
                outline: new SimpleLineSymbol().setColor(new Color([0,0,255])),
                fields: [{
                    name: "POP2007",
                    color: new Color("#FF0000")
                }],
                dotShape: "circle",
                dotValue: 1000000,
                dotSize: 1
            });
            layer.setRenderer(renderer);
            map.addLayers([layer]);

            map.on("layers-add-result", function (e: any) {
                var corn = e.layers[0].layer;
                var legend = new Legend({
                    map: map,
                    layerInfos: [{
                        layer: corn,
                        title: "人口分布（2007年）"
                    }]
                }, "legend");
                legend.startup();
            });
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon">
            <div id="map"></div>
            <div id="info">
                <div id="legend"></div>
            </div>
        </div>
    )
}
